package com.example.wecompose.ui

import android.widget.Toast
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.wecompose.WeViewModel
import com.example.wecompose.data.User
import com.example.wecompose.data.WeContactFeature
import com.example.wecompose.ui.theme.WeComposeTheme
import kotlinx.coroutines.launch

@Composable
fun ContactList(contacts: List<User>, viewModel: WeViewModel) {
    ContacListCtent(contacts,viewModel)
}

@Composable
private fun ContacListCtent(contacts: List<User>,viewModel: WeViewModel) {
    val context = LocalContext.current

    Column(
        Modifier
            .background(WeComposeTheme.colors.background)
            .fillMaxSize()
    ) {
        WeTopBar("通讯录",viewModel)

        Column(Modifier.background(WeComposeTheme.colors.listItem)) {
            WeContactFeature.entries.forEachIndexed { index, item ->
                MenuListItem(index, item){
                    Toast.makeText(context, "选中: ${item.displayName}", Toast.LENGTH_SHORT).show()


                }
            }
        }

        Text(
            "朋友", fontSize = 12.sp, color = WeComposeTheme.colors.textSecondary,
            modifier = Modifier.padding(4.dp)
        )
        LazyColumn(Modifier.background(WeComposeTheme.colors.listItem)) {
            itemsIndexed(contacts) { index, friend ->
                if (index > 0) {
                    //分割线
                    HorizontalDivider(
                        Modifier.padding(start = 68.dp),
                        color = WeComposeTheme.colors.divider,
                        thickness = 0.8f.dp
                    )
                }
                FriendListItem(friend)


            }
        }

    }
}

@Composable
fun ToastButton() {
    val context = LocalContext.current
    Button(onClick = {
        Toast.makeText(context, "操作成功", Toast.LENGTH_SHORT).show()
    }) {
        Text("显示 Toast")
    }
}

@Composable
fun ShowToastSnackBar() {
    val snackbarHostState = remember {SnackbarHostState()}
    val scope = rememberCoroutineScope()

    Scaffold(
        snackbarHost = { SnackbarHost(hostState = snackbarHostState) }
    ) { padding ->
        Button(
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar(
                        message = "文件已保存",
                        duration = SnackbarDuration.Short
                    )
                }
            },
            modifier = Modifier.padding(padding)
        ) {
            Text("显示通知")
        }
    }
}

@Composable
fun FriendListItem(friend: User) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.fillMaxWidth()
    ) {
        Image(
            painterResource(friend.avatar),
            friend.name,
            Modifier
                .padding(4.dp)
                .size(48.dp)
                .clip(RoundedCornerShape(4.dp))
        )



        Text(
            friend.name, fontSize = 17.sp, color = WeComposeTheme.colors.textPrimary
        )


    }
}


@Composable
private fun MenuListItem(index: Int, feature: WeContactFeature,onClick:()-> Unit) {
    if (index > 0) {
        HorizontalDivider(
            color = WeComposeTheme.colors.divider,
            thickness = 0.8f.dp,
            modifier = Modifier.padding(start = 68.dp)
        )
    }
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth()
            .clickable(
                onClick = onClick
            )
    ) {
        feature.iconRes?.let {
            Image(
                painterResource(it),
                feature.displayName,
                Modifier
                    .padding(4.dp)
                    .size(48.dp)
                    .clip(RoundedCornerShape(4.dp))
            )
        }

        Spacer(Modifier.width(10.dp))

        Text(
            feature.displayName, fontSize = 17.sp, color = WeComposeTheme.colors.textPrimary
        )


    }
}

@Preview
@Composable
private fun ContactListPreview() {
    val viewModel: WeViewModel = viewModel()
    ContacListCtent(viewModel.contacts,viewModel)
}